<template>
  <div class="box">
    <btns :dialogVisible.sync="dialogVisible" />
    <br />
    <dataTable :nodes="nodes" :loadData="loadData" />
    <el-dialog title="新增权限节点" :visible.sync="dialogVisible">
      <addForm :dialogVisible.sync="dialogVisible" />
    </el-dialog>
  </div>
</template>

<script>
import dataTable from './ui/dataTable.vue'
import btns from './ui/btns.vue'
import addForm from './ui/addForm.vue'
import { nodesListApi } from '@/api/nodeApi'

export default {
  components: {
    btns,
    dataTable,
    addForm
  },
  data() {
    return {
      dialogVisible: false,
      nodes: []
    }
  },
  mounted() {
    this.loadData()
  },
  watch: {
    dialogVisible(value) {
      if (!value) {
        this.loadData()
      }
    }
  },
  methods: {
    async loadData(prop = 'id', order = 'desc') {
      let ret = await nodesListApi(prop, order)
      this.nodes = ret.data
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  background: #fff;
  padding: 10px;
}
</style>
